<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Edit Product</title>
    <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<header th:replace="common/top"></header>
<div id="Content">
    <h2 th:text="${product.productId} != null ? 'Edit Product' : 'Add Product'"></h2>
    <form th:action="@{/catalog/saveProduct}" th:object="${product}" method="post">
        <div>
            <label>Product ID:</label>
            <input type="text" th:field="*{productId}" />
        </div>
        <div>
            <label>Category ID:</label>
            <select th:field="*{category}">
                <option value="" disabled="disabled" th:selected="*{category} == null">请选择类别</option>
                <option th:each="category : ${categories}"
                        th:value="${category.categoryId}"
                        th:text="${category.categoryId}"
                        th:selected="*{category} == ${category.categoryId}">
                </option>
            </select>
        </div>
        <div>
            <label>Name:</label>
            <input type="text" th:field="*{name}" />
        </div>
        <div>
            <label>Description:</label>
            <input type="text" th:field="*{descn}" />
        </div>
        <div>
            <button type="submit">Save</button>
        </div>
    </form>
</div>
<footer th:replace="common/bottom"></footer>

<!--脚本-->
<script th:src="@{/js/background.js}" count="500"></script>
</body>
</html>
